<template>
  <div>
    <van-nav-bar
      title="用户信息"
      class="title"
      left-arrow
      @click-left="onClickLeft"
    />
    <van-form @submit="onSubmit">
      <van-field
        v-model="admin.name"
        name="姓名"
        label="姓名"
        placeholder="姓名"
        :rules="[{ required: true, message: '请填写姓名' }]"
      />
       <van-field
        readonly
        clickable
        name="picker"
        :value="admin.sex.text"
        label="性别"
        placeholder="点击选择性别"
        @click="showSex = true"
      />
      <van-popup v-model="showSex" position="bottom">
        <van-picker
          show-toolbar
          :columns="sex"
          @confirm="onConfirmsex"
          @cancel="showSex = false"
        />
      </van-popup>
      <van-field
        v-model="admin.age"
        type="number"
        name="年龄"
        label="年龄"
        placeholder="年龄"
        :rules="[{ required: true, message: '请填写年龄' }]"
      />
       <van-field
        v-model="admin.phone"
        name="号码"
        label="电话号码"
        placeholder="号码"
        :rules="[{ required: true, message: '请填写号码' }]"
      />
      <van-field
        readonly
        clickable
        name="picker"
        :value="admin.work.text"
        label="工作"
        placeholder="点击选择工作"
        @click="showPicker = true"
      />
      <van-popup v-model="showPicker" position="bottom">
        <van-picker
          show-toolbar
          :columns="works"
          @confirm="onConfirmwork"
          @cancel="showPicker = false"
        />
      </van-popup>
      <van-field
        v-model="admin.adress"
        name="地址"
        label="家庭住址"
        placeholder="住址"
        :rules="[{ required: true, message: '请填写住址' }]"
      />
      <!-- <van-calendar v-model="showCalendar" @confirm="onConfirmBir" />
      <van-field name="uploader" label="文件上传">
        <template #input>
          <van-uploader v-model="uploader" :after-read="afterRead" />
        </template>
      </van-field> -->
      <div style="margin: 16px">
        <van-button round block type="info" native-type="submit"
          >提交</van-button
        >
      </div>
    </van-form>
   
  </div>
</template>

<script>
import axios from "axios";
import { Toast } from "vant";
export default {
  data() {
    return {
      admin: {
        name: "",
        age: "",
        sex:"",
        work: "",
        phone: "",
        adress: "",
      },
      works: [
        { id: 1, text: "学生" },
        { id: 2, text: "老师" },
        { id: 3, text: "工人" },
      ],
      sex:[
        {id:1,text:"男"},
        {id:2,text:"女"},
      ],
      showPicker: false,
      showSex:false,
      showCalendar: false,
      uploader: [],
    };
  },
  methods: {
    onClickLeft() {
      this.$router.go(-1);
    },

    onConfirmwork(value) {
      console.log(value);
      this.admin.work = value;
      this.showPicker = false;
    },
    onConfirmsex(value) {
      console.log(value);
      this.admin.sex = value;
      this.showSex = false;
    },

    onSubmit(values) {
      console.log("submit", values);
      axios
        .post("/api/fuseradd.php", {
          name: this.admin.name,
          age: this.admin.age,
          work: this.admin.work.id,
          sex: this.admin.sex.id,
          phone:this.admin.phone,
          adress: this.admin.adress,
        })
        .then((response)=> {
          console.log(response);
          Toast.success('添加成功');
          this.$router.go(-1);
        })
        .catch((error) =>{
          console.log(error);
        });
    },
  },
};
</script>

<style lang="scss" scoped>
.title {
  background: #42a5f3;
}
>>> .van-nav-bar_title,
>>> .van-nav-bar_arrow {
  color: white;
}
</style>